<template>
    <div>
        <!--弹出式表单-->
        <el-dialog title="选择权限" :visible.sync="dialogShow">
            <el-tree
                    :data="permissions"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    ref="tree"
                    highlight-current
                    :props="defaultProps">
            </el-tree>
        </el-dialog>
        <!--数据表格-->
        <el-table stripe :data="roles" style="width: 100%">
            <el-table-column
                    label="编号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="角色"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="描述"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.description }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini" @click="showPermissions(scope.row.id)">授权</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "UserView",
        data(){
            return{
                dialogShow:false,
                roles:[], //角色
                permissions:[], //权限
                defaultProps: {
                    children: 'childPermissions',
                    label: 'name'
                }
            }
        },
        methods:{
            loadRoles(){
                this.$http.get("/roles")
                    .then(result => {
                        this.roles = result.data.data;
                    })
            },
            loadPermissions(){
                this.$http.get("/permissions-children")
                    .then(result => {
                        this.permissions = result.data.data;
                    })
            },
            //点击角色，实现角色勾选的权限
            showPermissions(id){
                this.dialogShow = true;
                this.$refs.tree.setCheckedKeys([]);
                this.$http.get("/permission-ids/" + id)
                    .then(result => {
                        console.log(result.data.data);
                        //实现树的选中效果
                        this.$refs.tree.setCheckedKeys(result.data.data);
                    })
            }
        },
        mounted() {
            this.loadRoles();
            this.loadPermissions();
        }
    }
</script>

<style scoped>

</style>
